<template>
  <view v-if="lists && lists.length > 0">
    <view class="cu-bar bg-white" style="margin-top: 8upx;">
      <view class="action">
        <text class="cuIcon-title text-green"></text>
        <text>我的关注</text>
      </view>
    </view>
    <view class="container">
      <navigator :url="'/pages/video/moreGameType?id=' + item.id" class="bg-white shadow-warp margin-xs radius" v-for="(item, index) in lists" :key="index">
        <view class="header">
          <view class="title">
            <image :src="item.gameIcon" mode="widthFix"></image>
            <text class="text-gray" v-text="item.matchName"></text>
          </view>
        </view>
        <view class="content">
          <view class="avatar">
            <cu-avatar center size="60upx" :img="item.teamAIcon"></cu-avatar>
            <view class="teamName" v-text="item.teamAName"></view>
          </view>
          <view class="info">
            <view class="score" v-if="item.status === 0">{{ item.beginTime | dateFormat("HH:mm") }}</view>
            <view class="score" v-else>{{ item.teamAScore }} - {{ item.teamBScore }}</view>
            <view class="status" v-if="item.status === 0">未开始</view>
            <view class="status" v-if="item.status === 1">正在热播</view>
            <view class="status" v-if="item.status === 2">已结束</view>
          </view>
          <view class="avatar">
            <cu-avatar center size="60upx" :img="item.teamBIcon"></cu-avatar>
            <view class="teamName" v-text="item.teamBName"></view>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
import cuAvatar from "@/components/cuAvatar";
export default {
  components: {
    cuAvatar
  },
  data() {
    return {
      current: 0,
      lists: []
    };
  },
  computed: {
    mathCeil() {
      return Math.ceil(this.lists.length / 2);
    },
    slice() {
      let i = this.current + 1;
      return this.lists.slice(2 * (i - 1), 2 * (i - 1) + 2);
    }
  },
  mounted() {
    console.warn("follow-mounted")
    this.__init();
    uni.$on("home_onShow", () => {
      console.warn("follow-home-onshow")
      this.__init();
    });
  },
  methods: {
    __init() {
      if (!this.$store.state.user.isLogin) return false;
      return this.$api.video.getFollowMatch().then(_ => {
        this.lists = _.data.data;
        return _.data.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  navigator {
    width: calc((100% / 2) - 20upx);
    display: inline-block;
    padding: 10upx;
    float: left;
    &.shadow-warp:before,
    &.shadow-warp:after {
      display: none;
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20upx;
    .title {
      display: flex;
      align-items: center;
      image {
        width: 26upx;
        height: 26upx !important;
        border-radius: 100%;
      }
      text {
        display: inline-block;
        margin-left: 6upx;
        font-size: 22upx;
        @include line-clamp(1);
      }
    }
  }
  .content {
    display: flex;
    justify-content: space-around;
    margin-top: 25upx;
    .avatar {
      > text {
        display: block;
        text-align: center;
        line-height: 50upx;
        font-size: 24upx;
      }
    }
    .teamName {
      text-align: center;
      @include line-clamp(1);
    }
    .info {
      text-align: center;
      .score {
        font-size: 38upx;
        line-height: 60upx;
      }
      .status {
        font-size: 24upx;
      }
    }
  }
}
</style>
